<template>
	<view class='content'>
		<view class='levelitem' v-for="v in list">
			<image src="/static/vipbg.png" mode="widthFix"></image>
			<view class='levelview'>
				<view class='leveltitle'>{{v.title}}</view>
				<view class='levelrule'>{{v.rule}}</view>
				<view class='levelbottom flex'>
					<block v-if="v.uprice > 0">￥{{v.uprice}}</block>
					<view v-if="v.level > level" class='levelbtn' @click="onUp(v.level)">立即升级</view>
					<view v-else class='levelbtn gray'>无需升级</view>
				</view>
			</view>
		</view>
		<view class='backbtn' @click="onBack">返回</view>
		
		<uv-modal ref='popup' title="绑定手机" zIndex='99' :showCancelButton='true' confirmText="保存" @confirm="onSave">
			<uv-form labelPosition="left" ref="form" style="width: 100%;">
				<uv-form-item labelWidth='90px' label="手机号码" prop="title" ref="item1">
					<uv-input type='number' maxlength="11" v-model="mobile"></uv-input>
				</uv-form-item>
			</uv-form>		
		</uv-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[],
				level:0,
				needmobile:0,
				mobile:''
			}
		},
		onLoad() {
			var t = this;
			this.util.post('agent/level',{},(r)=>{
				t.list = r.list;
				t.level = r.level;
				t.needmobile = r.needmobile;
			})
		},
		methods: {
			onBack(){
				uni.navigateBack()
			},
			onSave(){
				if(this.mobile == '' || this.mobile.length != 11) return uni.showToast({
					title:'请输入正确手机号码',icon:'none'
				})
				var t = this;
				t.util.post('agent/level',{op:'bind',mobile:this.mobile},(res)=>{
					if(res.code != 1) return uni.showToast({title:res.msg,icon:'none'});
					uni.showToast({
						title:'绑定成功'
					})
					t.needmobile = 0;
				});
			},
			onUp(level){
				if(this.needmobile == 1) return this.$refs.popup.open();
				var t = this;
				uni.showModal({
					title:'温馨提示',
					content:'确定升级吗？',
					success(r) {
						if(r.confirm){
							t.util.post('agent/level/pay',{level},(res)=>{
								if(res.code != 1) return uni.showToast({title:res.msg,icon:'none'});
								if (typeof WeixinJSBridge == 'undefined'){
								   if( document.addEventListener ){
									   document.addEventListener('WeixinJSBridgeReady', function(){onBridgeReady();}, false);
								   }else if (document.attachEvent){
									   document.attachEvent('WeixinJSBridgeReady', function(){onBridgeReady();});
									   document.attachEvent('onWeixinJSBridgeReady', function(){onBridgeReady();});
								   }
								}else{
								   onBridgeReady();
								}
								function onBridgeReady(){
									WeixinJSBridge.invoke(
									  'getBrandWCPayRequest', {
										 'appId':res.data.appid,
										 'timeStamp':res.data.timeStamp,
										 'nonceStr':res.data.nonceStr,
										 'package':res.data.package,
										 'signType':res.data.signType,
										 'paySign':res.data.paySign
									  },
									  function(res){
										  if(res.err_msg == 'get_brand_wcpay_request:ok' ){
											 uni.showToast({
												 title: '支付成功'
											 });
											 
											 uni.redirectTo({
												url:'/pages/agent/index'
											 })
										  }else alert('支付失败');
									  }
								   );
								}
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
.content{
	padding: 60rpx 30rpx 30rpx;
	background: #f4f5f9;
	height: 100vh;
	.levelitem{
		position: relative;
		image{
			width: 100%;
		}
		.levelview{
			position: absolute;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			color: #b95b2e;
			padding: 30rpx;
			display: flex;
			flex-direction: column;
			.leveltitle{
				font-size: 36rpx;
				font-weight: bold;
			}
			.levelrule{
				font-size: 30rpx;
				margin-top: 20rpx;
			}
			.levelbottom{
				margin-top: auto;
				font-size: 36rpx;
				.levelbtn{
					background: #b95b2e;
					border-radius: 50rpx;
					color: white;
					padding: 10rpx 30rpx;
					font-size: 32rpx;
					margin-left: auto;
					&.gray{
						background: gray;
					}
				}
			}
		}
	}
}

</style>
